import React, { use, useState } from 'react'
import { useNavigate } from 'react-router-dom';

import { NavBar, Button, CalendarPicker, Card, Grid, AutoCenter } from 'antd-mobile';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
	faCalendarMinus,
	faDollarSign,
} from '@fortawesome/free-solid-svg-icons';

import classes from './index.module.css'

import dayjs from 'dayjs';

import { useDispatch } from 'react-redux';
import { asyncAddNewBill } from '@/store/billsSlice'

import { billTypeData } from '@/contants'
const today = new Date()

const useNumStrState = (defaultValue = 0) => {
	const removeLeadingZeros = (s) => {
		const oldLen = s.length;
		s = s.replace(/^0+/, ''); // 移除前导零
		// 全为 0 的情况，留一个 0
		if (s.length === 0 && oldLen > 0) {
			s = '0';
		}
		return s;
	}

	defaultValue = removeLeadingZeros(defaultValue);

	const [numVal, setNumVal] = useState(defaultValue)

	const handleNumChange = (val) => {
		val = val.replace(/[^\d.]/g, '');
		val = removeLeadingZeros(val);
		setNumVal(val)
	}
	return [numVal, handleNumChange]
}

const New = () => {
	const navigate = useNavigate();
	const back = () => {
		navigate("/");
	}
	const [money, setMoney] = useNumStrState('')

	const [date, setDate] = useState(today)

	const [visible, setVisible] = useState(false)

	const [type, setType] = useState('pay')

	const dispatch = useDispatch()

	const [useFor, setUseFor] = useState('food')

	const handleSubmit = () => {
		dispatch(asyncAddNewBill({
			type,
			money: parseFloat(money),
			date: dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
			useFor,
		}))
	}


	return (
		<div className={classes.container}>
			<header style={{ width: '100%' }}>
				<NavBar onBack={back}>Write A Penny</NavBar>
			</header>

			<section className={classes.btnSection}>
				<button className={`${type === 'pay' && classes.activeBtn}  ${classes.btn}`} onClick={() => {
					setType('pay')
				}}>Expense</button>
				<button className={`${type === 'income' && classes.activeBtn}  ${classes.btn}`} onClick={() => {
					setType('income')
				}}>Income</button>
			</section>
			<section className={classes.inputSection}>
				<span className={classes.inputBox} onClick={() => {
					setVisible(true)
				}}>
					<FontAwesomeIcon
						icon={faCalendarMinus}
					/>
					<i>{dayjs(date).format('YY-MM-DD')}</i>
				</span>
				<input
					type="text"
					value={money}
					onChange={
						e => {
							setMoney(e.target.value)
						}
					}
					className={classes.input}
				/>
				<FontAwesomeIcon icon={faDollarSign} className={classes.iconRight} />
				<CalendarPicker
					visible={visible}
					selectionMode='single'
					defaultValue={today}
					onClose={() => setVisible(false)}
					onMaskClick={() => setVisible(false)}
					confirmText='Confirm'
					cancelText='Cancel'
					title='Select Date'
					onConfirm={
						(date) => {
							setDate(date)
						}
					}
				/>
			</section>
			<section className={classes.categorySection}>
				{
					billTypeData[type].map(items => {
						return (
							<Card title={items.name}>
								<Grid columns={5} gap={8}>
									{
										items.list.map(item => {
											return (
												<Grid.Item
													className={useFor === item.type && classes.iconActive}
													onClick={() => {
														setUseFor(item.type)
													}}
												>
													<Grid columns={1}>
														<Grid.Item>
															<AutoCenter>
																{item.icon}
															</AutoCenter>
														</Grid.Item>
														<Grid.Item>
															<AutoCenter>
																<div>{item.name}</div>
															</AutoCenter>
														</Grid.Item>
													</Grid>
												</Grid.Item>
											)
										})
									}
								</Grid>
							</Card>
						)
					})

				}
			</section>
			<footer className={classes.footer}>
				<Button type='primary' className={classes.saveBtn} onClick={handleSubmit}>Save</Button>
			</footer>
		</div>
	)
}

export default New